let reg = /^[a-zA-Z]\w{7,15}$/;

$(`.name`).blur(function () {
    let boolenf = reg.test($(`.name`).val());
    console.log($(`.name`).val());
    console.log(boolenf);
    if (boolenf) {
        $(`.name`).css('background', `green`);
    } else {
        $(`.name`).css('background', `red`);
    }
})
let reg1 = /^.{11}$/;
$(`.phone`).blur(function () {
    let boolenf = reg1.test($(`.phone`).val());
    console.log($(`.phone`).val());
    console.log(boolenf);
    if (boolenf) {
        $(`.phone`).css('background', `green`);
    } else {
        $(`.phone`).css('background', `red`);
    }
})

let msgObjJ = window.localStorage.getItem('msg');
console.log(msgObjJ);
let msgObj = JSON.parse(msgObjJ);
var oTbody = document.querySelector(`tbody`)
setPage();
$(`[name="save"]`).click(function () {
    let detailObj = {}
    detailObj.name = $(`[name="name"]`).val();
    detailObj.phone = $(`[name="phone"]`).val();
    detailObj.study = $(`[name="study"]`).val();
    detailObj.age = $(`[name="age"]`).val();
    detailObj.money = $(`[name="money"]`).val();
    if (msgObj === null) {
        console.log(detailObj);
        window.localStorage.msg = JSON.stringify([detailObj]);
        console.log(msgObj);
        // 证明 有 购物车 数据信息 
        // 购物车 数据信息 是 json字符串 
    } else {
        // 如果 msgObj 数组长度是 0 表示是 空数组 
        if (msgObj.length === 0) {
            // 如果是 空车 
            // 将 新对象 unshift() 写入 购物车数组的起始位置
            msgObj.unshift(detailObj);
            // 将 新数组 转化为json字符串 存储到 localStorage 中
            window.localStorage.msg = JSON.stringify(msgObj);
            // 不是空车 
        } else {
            // 判断 当前商品 在不在 购物车中 
            // 使用 some() 函数 判断 msgObj 这个数组中 对象存储的goods_id 和 当前商品的 goods_id 有没有相同的
            let bool = msgObj.some(function (item) {
                return item.name === detailObj.name;
            })
            if (bool) {
                console.log(msgObj);
                window.alert(`此人信息已存在`);
            } else {
                // 将 新对象 unshift() 写入 购物车数组的起始位置
                msgObj.unshift(detailObj);
                // 将 新数组 转化为json字符串 存储到 localStorage 中
                window.localStorage.msg = JSON.stringify(msgObj);
            }
        }
    }
    console.log(msgObj);
    setPage();
})

// 删除
oTbody.addEventListener(`click`, function (event) {
    if (event.target.getAttribute(`name`) === `del`) {
        if (!window.confirm(`您确定要删除数据吗?`)) return;
        msgObj.splice(Number(event.target.getAttribute(`index`)), 1);
        window.localStorage.msg = JSON.stringify(msgObj);
        setPage();
    }
})



// 正则
let reg3 = /^[a-zA-Z]\w{7,15}$/;
$(`.name2`).blur(function () {
    let boolenf = reg3.test($(`.name2`).val());
    console.log($(`.name2`).val());
    console.log(boolenf);
    if (boolenf) {
        $(`.name2`).css('background', `green`);
    } else {
        $(`.name2`).css('background', `red`);
    }
})
let reg4 = /^.{11}$/;
$(`.phone2`).blur(function () {
    let boolenf = reg4.test($(`.phone2`).val());
    console.log($(`.phone2`).val());
    console.log(boolenf);
    if (boolenf) {
        $(`.phone2`).css('background', `green`);
    } else {
        $(`.phone2`).css('background', `red`);
    }
})



$(`.cz`).click(function () {
    $(`.name2`).val(``);
    $(`.phone2`).val(``);
    $(`.study2`).val(``);
    $(`.age2`).val(``);
    $(`.money2`).val(``);
})


// 修改
// 出修改框
oTbody.addEventListener(`click`, function (event) {


    if (event.target.getAttribute(`name`) === `revise`) {

        console.log(3333545456);
        $(`.xiu`).css('display', `block`);
        console.log(msgObj[Number(event.target.getAttribute(`index`))]);
        let newObj = msgObj[Number(event.target.getAttribute(`index`))];
        // console.log(Number(event.target.getAttribute(`index`)));
        let num = Number(event.target.getAttribute(`index`));
        $(`.name2`).val(newObj.name);
        $(`.phone2`).val(newObj.phone);
        $(`.study2`).val(``);
        $(`.age2`).val(``);
        $(`.money2`).val(``);
        let newObj2 = {};
        $(`.bc`).click(function (event) {
            newObj2.name = $(`.name2`).val();
            newObj2.phone = $(`.phone2`).val();
            newObj2.study = $(`.study2`).val();
            newObj2.age = $(`.age2`).val();
            newObj2.money = $(`.money2`).val();
            console.log(newObj2);
            $(`.xiu`).css('display', `none`);
            msgObj[num] = newObj2;
            console.log(msgObj);
            window.localStorage.msg = JSON.stringify(msgObj);
            setPage();

        })

    }

})






function setPage() {
    if (msgObj.length === 0) {
        oTbody.innerHTML = `<tr><td colspan='7'>没有信息</td></tr>`;
        return;
    }
    var str = ``;
    msgObj.forEach(function (item, key) {
        str += `
    <tr>
        <td>${item.name}</td>
        <td>${item.phone}</td>
        <td>${item.study}</td>
        <td>${item.age}</td>
        <td>${item.money}</td>
        <td><button name="del" index="${key}">删除</button></td>
        <td><button name="revise" index="${key}">修改</button></td>
    </tr>
    `;
    })
    oTbody.innerHTML = str;
}
$(`[name="reset"]`).click(function () {
    $(`[name="name"]`).val(``);
    $(`[name="phone"]`).val(``);
    $(`[name="study"]`).val(``);
    $(`[name="age"]`).val(``);
    $(`[name="money"]`).val(``);
})


